<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { addActivity } from '@/api/activity'
	import { getFutureDate} from '@/utils/common'
	
	const config = getApp().globalData.config
	const loading = ref(false)
	const agree = ref([])
	const uForm = ref(null)
	const form = ref({
		activityId: '1914206088436125785',
		name: undefined,
		tableNum: undefined,
		participantNum: undefined,
		date: 0,
		session: 0,
		remark: undefined
	})
	const rules = ref({
		name: [
			{required: true, message: '请输入办宴人姓名', trigger: 'blur'}
		],
		tableNum: [
			{type: 'number',required: true, message: '请输入办宴桌数', trigger: 'blur'}
		],
		participantNum: [
			{type: 'number',required: true, message: '请输入就餐人数', trigger: 'blur'}
		],
		date: [
			{type: 'number', required: true, message: '请选择用餐时间', trigger: 'change'}
		],
		session: [
			{type: 'number', required: true, message: '请选择场次', trigger: 'change'}
		]
	})
	const dateList = ['05-01', '05-02', '05-03']
	const sessionList = ['12:00', '13:00']
	const enrollPopup = ref(null)
	
	function dateChange(e) {
		let date = e.detail.value
		form.value.date = date
	}
	function sessionChange(e) {
		let session = e.detail.value
		form.value.session = session
	}
	function viewActivity() {
		// let site = config.appInfo.agreements[2]
		// uni.navigateTo({
		// 	url: `/pages/webview?title=${site.title}&url=${site.url}`
		// })
		uni.navigateTo({
			url: '/pages/activity/agree'
		})
	}
	function submit() {
		if(!agree.value.length) {
			uni.showToast({icon: 'none', title: '请阅读并勾选用户须知'})
			return
		}
		uForm.value.validate().then(() => {
			loading.value = true
			let params = uni.$uv.deepClone(form.value)
			params.date = dateList[params.date]
			params.session = sessionList[params.session]
			addActivity(params).then(res => {
				loading.value = false
				let result = res.result
				pay(result)
			}).catch(() => loading.value = false)
		})
	}
	function pay(data) {
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: data.timeStamp,
			nonceStr: data.nonceStr,
			package: data.packageVal,
			signType: data.signType,
			paySign: data.paySign,
			success: (data) => {
				enrollPopup.value.open()
			},
			fail: (err) => {
				uni.showToast({icon: 'none', title: '报名失败'})
			}
		})
	}
	function closeEnroll() {
		enrollPopup.value.close()
		uni.navigateBack({delta: 2})
	}
	
	onLoad(() => {
		
	})
</script>

<template>
	<view class="app-container">
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto" labelPosition="top" :labelStyle="{fontWeight: '600'}">
			<view class="form-box">
				<uv-form-item label="姓名" prop="name">
					<view class="custom-content">
						<uv-input v-model="form.name" placeholder="请输入姓名" border="none" maxlength="32" clearable></uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="办宴需求" prop="tableNum">
					<view class="custom-content">
						<uv-input type="number" v-model="form.tableNum" placeholder="请输入办宴桌数" border="none" maxlength="32" clearable>
							<template v-slot:suffix>
								<text class="text-no">桌(8~10人)</text>
							</template>
						</uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="就餐人数" prop="participantNum">
					<view class="custom-content">
						<uv-input type="number" v-model="form.participantNum" placeholder="请输入就餐人数" border="none" maxlength="32" clearable></uv-input>
					</view>
				</uv-form-item>
				<uv-form-item label="用餐时间" prop="date">
					<picker @change="dateChange" :value="form.date" :range="dateList">
						<view class="custom-content">
							<text :class="form.date === undefined? 'text-no' : ''">{{form.date === undefined? '请选择用餐时间' : dateList[form.date]}}</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="场次" prop="session">
					<picker @change="sessionChange" :value="form.session" :range="sessionList">
						<view class="custom-content">
							<text :class="form.session === undefined? 'text-no' : ''">{{form.session === undefined? '请选择场次' : sessionList[form.session]}}</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="备注信息">
					<view class="top-box">
						<uv-textarea v-model="form.remark" placeholder="请填写预约备注" count border="none" height="144"
							:custom-style="{background: '#F8F5F5'}" placeholder-style="color: #808080"></uv-textarea>
					</view>
				</uv-form-item>
			</view>
		</uv-form>
		<view class="app-bottom">
			<uv-checkbox-group v-model="agree" placement="column" shape="circle" size="30" iconSize="22" activeColor="#FA3F00">
				<uv-checkbox name="true">
					<view class="agree-text">
						<text>我已知晓并同意</text>
						<text class="text-primary" @click.stop="viewActivity">《用户须知》</text>
					</view>
				</uv-checkbox>
			</uv-checkbox-group>
			<uv-button color="linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" text="确认支付 ￥50" @click="submit" :disabled="loading"></uv-button>
		</view>
		
		<uv-popup ref="enrollPopup" mode="center" bgColor="none">
			<view class="popup-box">
				<view class="popup-content">
					<uv-image src="https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-04-23/1745375483665_success.png"
						width="204" height="138"></uv-image>
					<text class="content-title">报名成功</text>
					<text class="content-tip">恭喜你报名成功！请准时参加宴席</text>
				</view>
				<view class="popup-bottom">
					<uv-button color="linear-gradient(102deg, #FA3F00 0%, #FF7445 100%)" shape="circle" text="我知道了" @click="closeEnroll"></uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		padding-bottom: 200rpx;
		.form-box{
			padding: 0 24rpx 24rpx;
			background-color: #FFFFFF;
			.custom-content{
				margin-top: 14rpx;
				padding: 24rpx;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				gap: 10rpx;
				background-color: #F8F5F5;
			}
			.text-disable{
				color: #c0c4cc;
			}
			.text-no{
				color: #808080;
			}
			.top-box{
				margin-top: 14rpx;
			}
		}
		.app-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			height: 196rpx;
			padding: 24rpx;
			background-color: #FFFFFF;
			border-top: 2rpx solid #D7DBE1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.agree-text{
				color: #626466;
				.text-primary{
					color: #F92E1D;
				}
			}
		}
		.popup-box{
			width: 586rpx;
			background-color: #FFFFFF;
			border-radius: 32rpx;
			padding: 32rpx;
			.popup-content{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 24rpx;
				.content-title{
					font-weight: 600;
					font-size: var(--theme-xl);
					line-height: var(--theme-xl-line);
				}
				.content-tip{
					color: #666666;
				}
			}
			.popup-bottom{
				padding-top: 58rpx;
			}
		}
	}
</style>